import React, { useEffect, useState } from 'react'
import { Collapse, Button, Checkbox, message, Popover,Space } from 'antd'
import { connect, useDispatch, useSelector } from "react-redux"
import { UpdateTodolistAC,mapOldToTodayAC} from '../../../redux/actions'
import {getDay} from '../../../utils/dateSmallToBig'
import {Link} from 'react-router-dom'
import './todolist.css'
export default function TodoList(props) {
    const [visible, setvisible] = useState(false)
    // 获取到dispatch
    const dispatch = useDispatch()
    const result = useSelector(state => {
        return {
            todolistData: state.todoRC.todolist
        }
    })
    const { Panel } = Collapse;

    function callback(key) {
        console.log(key);
    }

    

    function onChange(checkedValues) {
        console.log('checked = ', checkedValues.target.value);
        console.log('done = ', checkedValues.target.checked);
        let valueid = checkedValues.target.value
        console.log('valueid', valueid);
        if (checkedValues.target.checked) message.success(`${result.todolistData.filter(item => item.id == valueid)[0].title}已完成`)
        dispatch(UpdateTodolistAC(checkedValues.target.value))
    }

    //确定顺延
    const oldTimeToToday = (e) => {
        e.stopPropagation()
        console.log(e);
        dispatch(mapOldToTodayAC(new Date().toLocaleDateString()))
        setvisible(!visible)
    }

    //关闭顺延
    const hide = (e) => {
        console.log('关闭e',e);
        e.stopPropagation()
        // e.nativeEvent.stopImmediatePropagation();
        setvisible(!visible)
    };

    //显示确认弹框
    const handleVisibleChange = (e) => {
        // console.log('e',e);
        e.stopPropagation()
        setvisible(!visible)
    };


    // //复选框状态改变
    // function onChange(e) {
    //     console.log(`checked = ${e.target.checked}`);
    //   }

    useEffect(() => {
        console.log("componentDidMount");
        console.log(result);
        console.log('周几',new Date().getDay());
    }, [])
    const options = [
        { label: 'Apple', value: 'Apple' },
        { label: 'Pear', value: 'Pear' },
        { label: 'Orange', value: 'Orange' },
    ];
    const getItemId = (item) =>{
        console.log(item);
    }

  
 
    return (
        <div>
            <Collapse defaultActiveKey={['1']} onChange={callback} bordered={false} ghost={true}>
                {result.todolistData.filter(item => item.oldTime && !item.done).length > 0 ? <Panel header="已过期" key="1" extra={<Popover
                    content={
                    <div>
                        <p style={{}}>当前列表中所有已过期任务将顺延至今天。确定顺延吗?</p>
                        <div style={{width:'100%',display:'flex',justifyContent:'flex-end'}}><Space><Button type='default' onClick={(e)=>{hide(e)}}>关闭</Button><Button type='primary' onClick={(e)=>{oldTimeToToday(e)}}>顺延</Button></Space></div>
                    </div>
                }
                    placement="bottom"
                    title={<h3 style={{fontWeight:'bold'}}>顺延至今天</h3>}
                    trigger="click"
                    visible={visible}
                    // onVisibleChange={(e)=>{handleVisibleChange(e)}}
                > <Button type='link' onClick={(e)=>{handleVisibleChange(e)}}>顺延</Button></Popover>}>
                    {result.todolistData.map(item => {
                        return (item.oldTime && !item.done ? <div className='itemhover' style={{ width: '100%', height: '37px', display: 'flex', alignItems: "center", paddingLeft: '20px' }} key={item.id}>&nbsp;<Checkbox onChange={onChange} value={item.id}></Checkbox><div onClick={()=>{getItemId(item)}} style={{ borderBottom: '1px solid rgb(243,243,243)', marginLeft: '5px', flexGrow: '1', height: '100%', lineHeight: '37px', paddingLeft: '3px' }}>{item.title}</div></div> : '')
                    })}
                </Panel> : ''}
                {result.todolistData.filter(item => item.done == false && !item.oldTime).length > 0 ? <Panel header={`今天 周${getDay()}`} key="2">
                    {result.todolistData.map(item => {
                        //未完成且不是过期任务
                        return (!item.done && !item.oldTime ? <div className='itemhover' style={{ width: '100%', height: '37px', display: 'flex', alignItems: "center", paddingLeft: '20px' }} key={item.id}>&nbsp;<Checkbox onChange={onChange} value={item.id}></Checkbox><div onClick={()=>{getItemId(item)}} style={{ borderBottom: '1px solid rgb(243,243,243)', marginLeft: '5px', flexGrow: '1', height: '100%', lineHeight: '37px', paddingLeft: '3px' }}>{item.title}</div></div> : '')
                    })}

                </Panel> : ""}
                {result.todolistData.filter(item => item.done == true).length > 0 ? <Panel header="已完成" key="3">
                    {result.todolistData.map(item => {
                        //完成且不是过期的任务
                        return (item.done ? <div className='itemhover' style={{ width: '100%', height: '37px', display: 'flex', alignItems: "center", paddingLeft: '20px' }} key={item.id}>&nbsp;<Checkbox defaultChecked onChange={onChange} value={item.id}></Checkbox><div onClick={()=>{getItemId(item)}} style={{ borderBottom: '1px solid rgb(243,243,243)', marginLeft: '5px', flexGrow: '1', height: '100%', lineHeight: '37px', paddingLeft: '3px' }}>{item.title}</div></div> : '')
                    })}

                </Panel> : ''}
            </Collapse>
        </div>
    )
}
